<template>
  <view class="wrap">
     <top-tab tabTitle="扫码支付" backColor="#5B2177" @backClick="backClick">
			 <view slot="tab-right" class="icon-service"  @click="service">
				<view class="iconfont">&#xe60d;</view>
				<view class="name">客服</view>
			 </view>
		</top-tab>
		 <view class="main">
			 <image class="pay-img" :src="codeImg"></image>
			 <view class="orde-pay-finish">扫描二维码进行付款</view>
			 <view class="explain">¥ {{payMoney}}元</view>
			 <view class="btn-back-home" @click="backHome">确认已支付</view>
			 <view class="orde-record">
				<view class="hint">说明</view>
				<view class="text">1：支付后未到账可联系客服</view>
				<view class="text">2：客服确认付款充值砖石30分钟到到账</view>
			 </view>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
  export default {
		components: { topTab },
    data() {
      return {
				payMoney: 0,
				codeImg: '',
				amount: '' // 支付id
			}
    },
  onLoad(options) {
		if(options) {
			this.payMoney = options.money
			this.codeImg = options.codeUrl
			this.amount = options.amount
		}
	},
  methods: {
		// 客服
		service() {
			uni.navigateTo({
			    url: '/pages/my/buy_vip/service'
			});
		},
		// 确认支付
		async backHome() {
			const res = await $POST(`/boke-pay/recharge/confirm/${this.amount}`)
			if (res.code === "0000000") {
				uni.showToast({title: "待后台审核，请耐心等待！", icon:'none'})
			}
		},
		// 返回上一页
		backClick() {
			uni.navigateTo({
			    url: '/pages/my/buy_vip/buy_vip'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.icon-service{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.name{
			font-size: 26rpx;
			margin-left: 10rpx;
		}
	}
	.main{
		text-align: center;
		overflow: hidden;
		padding: 0 32rpx;
		.pay-img{
			display: block;
			width: 336rpx;
			height: 376rpx;
			margin: auto;
			margin-top:45rpx;
		}
		.orde-pay-finish{
			font-size: 40rpx;
			font-family: Adobe Heiti Std;
			font-weight: 500;
			color: #333333;
			margin: 30rpx 0 35rpx 0rpx;
		}
		.explain{
			font-size: 42rpx;
			font-family: Adobe Heiti Std;
			font-weight: 600;
			color: #FF4C00;
		}
		.orde-record{
			padding-left: 30rpx;
			text-align: left;
			.hint{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
				margin: 58rpx 0 49rpx 0;
			}
			.text{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-bottom: 20rpx;
			}
		}
		.btn-back-home{
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 14rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Adobe Heiti Std;
			font-weight: 400;
			color: #FFFFFF;
			margin: auto;
			margin-top: 82rpx;
		}
	}
</style>
